<template>
	<view class="charger-item flex" v-if="info">
		<view class="status flex">
			<view class="circle-progress">
				<lj-chart :text="statusText" v-if="info.pileStatus" :rotate="100" :textColor="statusColor" :color="statusColor"></lj-chart>
			</view>
		</view>
		<view class="info">
			<view class="name">{{ info.terminalName }}</view>
			<view class="sn">终端编号：{{ info.terminalId }}</view>
			<view class="power">充电功率：{{ info.power }}kw(近期最大{{ info.pileCurrent }}kw)</view>
			<view class="voltage">充电电压：{{ info.voltage }}</view>
			<view class="standard">{{ info.pileType == 1 ? '慢充' : '快充' }} |
				{{ info.nationalStandard == 0 ? '国标2011' : '国标2015' }}</view>
		</view>
		<view class="flex" :class="[speedClass[info.pileType]]">
			<text class="text">{{ speedText[info.pileType] }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object | Array,
				required: true
			}
		},
		data() {
			return {
				speedText: ['慢', '快', '超'],
				speedClass: ['slow', 'fast', 'super']
			}
		},
		computed: {
			statusText() {
				const statusMap = {
					1: '空闲',
					2: '使用中',
					3: '即将完成'
				}
				return statusMap[this.info.pileStatus] || ''
			},
			statusColor() {
				const colorMap = {
					1: '#42E0A2',
					2: '#FF4600',
					3: '#1C6FFB'
				}
				return colorMap[this.info.pileStatus] || '#42E0A2'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.charger-item {
		position: relative;

		&:not(:last-child) {
			border-bottom: 1rpx solid #EEEEEE;
			margin-bottom: 20rpx;
			padding: 20rpx 0;
		}

		&:last-child {
			padding-top: 20rpx;
		}

		.status {
			width: 90rpx;
			flex-direction: column;
			align-items: center;
			margin-right: 30rpx;
			align-self: flex-start;

			.circle-progress {
				width: 90rpx;
				height: 90rpx;
				position: relative;
				margin-bottom: 15rpx;
			}
		}

		.info {
			overflow: hidden;
			margin-left: 30rpx;

			.name {
				font-size: 24rpx;
				color: #333;
				font-family: "PINGFANG";
				margin-bottom: 5rpx;
				font-weight: 400;
			}

			.sn,
			.power,
			.voltage,
			.standard {
				font-size: 22rpx;
				color: #777;
				font-family: "PINGFANG";
				margin-bottom: 5rpx;
			}
		}

		.super,
		.fast,
		.slow {
			position: absolute;
			right: 0;
			top: 20rpx;
			font-family: "PINGFANG";
			font-size: 20rpx;
			color: #fff;
			width: 32rpx;
			height: 32rpx;
			border-radius: 4rpx;
			justify-content: center;
		}

		.super {
			background: linear-gradient(to bottom, #947DFE, #6C4EFB);
		}

		.fast {
			background: linear-gradient(to bottom, #FF8924, #FF6800);
		}

		.slow {
			background: linear-gradient(to bottom, #42E0A2, #2CD291);
		}
	}
</style>